<template>
  <div>
    <section class="meeting_body mt16">
      <div class="meeting_title">
        <div>
          <span class="title">近期可赞助的会议</span>
          <span class="butn" @click="openMeetDia()">+ 订阅行业会议</span>
        </div>
        <div class="more" @click="$router.push('support/allSupport')">
          更多
          <i class="el-icon-d-arrow-right"></i>
        </div>
      </div>
      <div v-loading="isMeetList">
        <div class="meeting_list">
          <div class="meeting_item realitive" v-for="(item, index) in canSponsorMeeting" :key="item.mid + index">
            <div class="meeting_item_top">
              <div class="flex_bt_mt">
                <div class="flex">
                  <div class="realitive">
                    <img class="meeting_img" @click="gohref(item)" :src="item.meetingImg" alt="" />
                    <div v-if="item.meetSponsorType == 3" class="meeting_hy_A">
                      A类会议
                    </div>
                    <div v-if="item.meetSponsorType == 2" class="meeting_hy_B">
                      B类会议
                    </div>
                    <div v-if="item.meetSponsorType == 1" class="meeting_hy_C">
                      C类会议
                    </div>
                  </div>
                  <div>
                    <h5 class="h5 sl1 meet_title" @click="gohref(item)">
                      {{ item.title }}
                    </h5>
                    <div class="flex mg14">
                      <span class="meeting_bq">{{ item.industryOneStr }}</span>
                      <span class="download_zsh" v-if="item.hasInvitationLetters>0" @click="downloadZSH(item)">下载招商函</span>
                    </div>
                    <span class="time">{{ item.startTime2 }}—{{ item.videoEndDate }}</span>
                    <!-- <el-button type="text">下载招商函</el-button> -->
                  </div>
                </div>
                <div class="center">
                  <span class="f12 col7e8">会议倒计时</span>
                  <div class="meeting_djs">{{ item.startTime3 }}</div>
                  <span class="meeting_butn" @click="goSupport(item)">立即赞助</span>
                </div>
              </div>
            </div>
            <div class="meeting_item_btm">
              <span style="color:#4f5862">会议赞助商</span>
              <div class="ml20" v-if="item.sponsorList.length > 0">
                <a :href="items.pcUrl" v-for="(items, indexs) in item.sponsorList.slice(0, 4)" :key="items.mid + indexs"
                  target="_blank" rel="noopener noreferrer">
                  <img :src="items.webinar_company_logo" class="meeting_list_img" alt="" />
                </a>
              </div>
              <div class="col7e8" v-else>&nbsp;&nbsp; 暂无赞助商</div>
            </div>
            <img v-if="item.isSubscribe == 1" src="@/assets/img/dingzhihuiyi.png" class="meeting_dyhy" alt="" />
          </div>
        </div>
      </div>
      <div class="alignRight">
        <Pagination :total="total" :page="page" :limit="limit" @pagination="paginations" />
      </div>
    </section>
    <meeting-dialogs :visible.sync="isSuperAdmin" ref="meetingDia" @closeEvents="closeEvents"></meeting-dialogs>
  </div>
</template>

<script>
import api from "@/api";
import axios from "axios";
import meetingDialogs from "./meetingDialog.vue";
import { changeDateFormat9, changeDateFormat3 } from "@/utils/commin.js";
import Pagination from "@/components/Pagination/index.vue";
export default {
  components: {
    meetingDialogs,
    Pagination,
  },
  data() {
    return {
      canSponsorMeeting: [],
      isSuperAdmin: false,
      isMeetList: false,
      limit: 20,
      page: 1,
      total: 0,
    };
  },
  computed: {
    imShowId() {
      return this.$store.getters.imShowId;
    },
  },
  mounted() {
    this.getCanSponsorMeeting();
  },
  methods: {
    downloadZSH(val){
      let form={
        mid:val.mid
      }
     api.home.getInvitationLetters(form).then(res=>{
      let time=500
      res.data.forEach((item,index) => {
        setTimeout(() => {
          axios.get('https://img1.17img.cn/17img'+ item.path,{responseType:'blob'}).then(res=>{
          const blob = new Blob([res.data])
            let aLink = document.createElement('a') //动态创建一个a标签
            let evt = document.createEvent('HTMLEvents') //动态创建一个event对象
            evt.initEvent('click', true, true) //初始化一个点击事件
            aLink.download = item.name
            aLink.href =URL.createObjectURL(blob) //将blob同步到a标签的href属性上
            aLink.click() //触发点击事件        
          })
        }, time*index);
       
           });
    
     })
    },
    gohref(item) {
      window.open(
        `https://www.instrument.com.cn/webinar/meetings/${item.shortname}/`
      );
    },
    goSupport(val) {
      this.$router.push({ path: "/support/apply", query: { mid: val.mid } });
    },
    getCanSponsorMeeting() {
      this.isMeetList = true;
      let form = {
        imshowId: this.imShowId,
        limit: this.limit,
        page: this.page,
      };
      api.home.getCanSponsorMeeting(form).then((res) => {
        this.canSponsorMeeting = res.data.records;
        this.canSponsorMeeting.forEach((item) => {
          item.startTime2 = changeDateFormat9(item.startTime);
          item.videoEndDate = changeDateFormat9(item.videoEndDate);
          item.startTime3 = changeDateFormat3(item.startTime);
          
          if (item.sponsorList.length > 0) {
            var arr = item.sponsorList;
            console.log(arr,'arr');
            //去重
            let result = this.uniqueByValue(arr, 'webinarCompanyAccount')
            item.sponsorList = result;
          }
        });

        this.total = res.data.total;
        setTimeout(() => {
          this.canSponsorMeeting.forEach((item) => {
            item.startTime3 = changeDateFormat3(item.startTime);
          });
        }, 60000);
        this.isMeetList = false;
      });
    },
    uniqueByValue(arr, key) {
  const seen = new Set();
  return arr.filter((item) => {
    const isNew = !seen.has(item[key]);
    seen.add(item[key]);
    return isNew;
  });
},
    openMeetDia() {
      this.isSuperAdmin = true;
    },
    closeEvents(val) {
      this.isSuperAdmin = false;
      this.getCanSponsorMeeting();
    },
    paginations(val) {
      this.limit = val.limit;
      this.page = val.page;
      this.getCanSponsorMeeting();
    },
  },
};
</script>

<style lang="scss" scoped>
@media only screen and (min-width: 1000px) and (max-width: 1450px) {
  .meeting_item {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .meet_title {
    width: 30vw !important;
  }
}

.meeting_body {
  padding: 20px 16px;
  background: #fff;

  .meeting_title {
    @include flex(row, center, space-between);

    .title {
      font-size: 16px;
      font-weight: 600;
      color: #202933;
      line-height: 19px;
    }

    .butn {
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #0c7ff2;
      padding: 4px 8px;
      font-size: 14px;
      font-weight: 600;
      color: #0c7ff2;
      line-height: 16px;
      margin-left: 30px;
      display: inline-block;
      cursor: pointer;
    }

    .butn:hover {
      background: #0c7ff21a;
      transition: background 0.5s;
    }

    .more {
      font-size: 14px;
      font-weight: 600;
      color: #7e8790;
      line-height: 16px;
      cursor: pointer;
    }
  }

  .meeting_list {
    @include flex(row, flex-start, flex-start);
    flex-wrap: wrap;
    margin-top: 24px;
    width: 100%;
    min-height: 400px;

    .meeting_item {
      width: calc(50% - 10px);
      border: 1px solid #f1f4f6;
      margin-right: 16px;
      margin-bottom: 16px;

      .meeting_item_top {
        padding: 27px 34px 27px 16px;

        .flex_bt_mt {
          @include flex(row, flex-start, space-between);

          .meeting_img {
            cursor: pointer;
            width: 110px;
            height: 83px;
            // object-fit: contain;
            display: inline-block;
            margin-right: 16px;
            border-radius: 4px 4px 4px 4px;
          }

          .meet_title {
            cursor: pointer;
          }

          .meet_title:hover {
            color: #0c7ff2;
          }

          .meeting_hy_A {
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(270deg, #ff7272 0%, #f72626 100%);
            border-radius: 4px 0px 4px 0px;
            padding: 2px 6px;
            font-size: 12px;
            color: #ffffff;
          }

          .meeting_hy_B {
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(90deg, #ffbe31 0%, #e9be28 100%);
            border-radius: 4px 0px 4px 0px;
            padding: 2px 6px;
            font-size: 12px;
            color: #ffffff;
          }

          .meeting_hy_C {
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(90deg, #0ca424 0%, #0dbe29 100%);
            border-radius: 4px 0px 4px 0px;
            padding: 2px 6px;
            font-size: 12px;
            color: #ffffff;
          }

          .h5 {
            font-size: 16px;
            color: #000000;
            line-height: 16px;
            width: 12.97vw;
          }

          .mg14 {
            margin: 14px 0;

            .meeting_bq {
              font-size: 12px;
              color: #7e8790;
              line-height: 14px;
              display: inline-block;
              margin-right: 14px;
              border-radius: 2px 2px 2px 2px;
              padding: 2px 6px;
              background: #f0f3f7;
            }
          }

          .time {
            font-size: 13px;
            color: #7e8790;
            line-height: 16px;
          }

          .center {
            text-align: center;

            .meeting_djs {
              font-size: 12px;
              color: #2864f6;
              line-height: 16px;
              margin: 6px auto 10px;
            }

            .meeting_butn {
              font-size: 14px;
              font-weight: 600;
              color: #ffffff;
              line-height: 16px;
              padding: 6px 20px;
              display: inline-block;
              cursor: pointer;
              border-radius: 2px 2px 2px 2px;
              background: #2864f6;
            }

            .meeting_butn:hover {
              transition: background 0.4s;
              background: #2864f680;
            }
          }
        }
      }

      .meeting_item_btm {
        @include flex(row, center, flex-start);
        border-top: 1px solid #f1f4f6;
        padding: 10px 16px 8px;
        height: 37px;

        // line-height: 37px;
        .ml20 {
          margin-left: 20px;

          .meeting_list_img {
            display: inline-block;
            width: 54px;
            height: 25px;
            object-fit: contain;
            padding: 3px 0;
            border: 1px solid #e5eaf0;
            margin-right: 12px;
            cursor: pointer;
          }
        }
      }

      .meeting_dyhy {
        position: absolute;
        right: 10px;
        top: 0;
        width: 28px;
      }
    }

    .meeting_item:nth-child(2n) {
      margin-right: 0;
      // margin-bottom: 0;
    }
  }
}
.download_zsh{
  color: #0c7ff2;
  font-size: 14px;

  cursor: pointer;
}
.download_zsh:hover{
  text-decoration: underline;
}
</style>